<template>
	<div class="goods-list">
		<!-- <router-link class="goods-item" v-for="item in goodslist" :key="item.id" :to="'/home/goodsinfo/'+item.id"
		 tag="div">
			<img :src="item.img_url">
			<h1 class="title">{{item.title}} 8</h1>
			<div class="info">
				<p class="price">
					<span class="now">￥{{item.sell_price}}9</span>
					<span class="old">￥{{item.market_price}}</span>
				</p>
				<p class="sell">
					<span>热卖中</span>
					<span>剩{{item.stock_quantity}}件</span>
				</p>
			</div>
		</router-link> -->

		<!-- 在网页中有俩种跳转方式
		方式1：使用a标签 叫做标签跳转
		方式2：使用wundows.location.href的形式，叫做编程导航 -->
		<div class="goods-item" v-for="item in goodslist" :key="item.id" @click="goDetail(item.id)">
			<img :src="item.img_url">
			<h1 class="title">{{item.title}} 8</h1>
			<div class="info">
				<p class="price">
					<span class="now">￥{{item.sell_price}}9</span>
					<span class="old">￥{{item.market_price}}</span>
				</p>
				<p class="sell">
					<span>热卖中</span>
					<span>剩{{item.stock_quantity}}件</span>
				</p>
			</div>
		</div>

		<mt-button type="danger" size="large" @click="getMore">加载更多</mt-button>


	</div>
</template>

<script type="text/javascript">
	export default{
		data(){
			//往自己组件内部挂载私有数据
			return {
				pageindex:1, //分页的页数
				goodslist:[],//存放商品列表
			}
		},
		created(){
			this.getGoodsList();
		},
		methods:{
			getGoodsList(){
				//获取商品列表
				this.$http.get('api/getgoods?pageindex='+this.pageindex).then(result=>{
					if(result.body.status===0){
						this.goodslist=this.goodslist.concat(result.body.message);
					}
				})
			},
			getMore(){// 获取更多
				this.pageindex++;
				this.getGoodsList();
			},
			goDetail(id){ //使用js进行路由
				// console.log(this)
				//注意：一定要区分 this.$route 和this.$router 这俩个对象，
				// 其中：this.$route是路由参数对象，所有路由中的参数。params，query都属于它
				// 其中：this.$router是一个路由导航对象，用它可以方便使用js代码实现路由的前进后退，跳转新的url地址
				//1.最简单的 this.$router.push('/home/goodsinfo/'+id)
				// 2.传递对象 this.$router.push({path:'/home/goodsinfo/'+id})
				// 3.传递命名的路由 goodsinfo在router.js中定义
				this.$router.push({name:'goodsinfo',params:{id:id}});


			}

		}
	}
</script>

<style lang="scss" scoped="">
	.goods-list{
		display: flex;
		flex-wrap: wrap;
		padding: 7px;
		justify-content: space-between;

		.goods-item{
			width: 49%;
			border: 1px solid #ccc;
			box-shadow: 0 0 8px #ccc;
			margin: 4px 0;
			padding: 2px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			min-height: 253px;
			img {
				width: 100%
			}
			.title{
				font-size: 14px;
				word-wrap: break-word;
			}
			.info{
				background-color: #eee;
				p{
					margin: 0;
					padding: 5px;
				}
				.price{
					.now{ color: red; font-weight:  bold; font-size: 16px;}
					.old{text-decoration: line-through; font-size: 12px; margin-left: 10px;}
				}
				.sell{
					display: flex;
					justify-content: space-between;
					font-size: 12px;
				}
			}
		}
	}

</style>